import React, {Component} from 'react';
import {Card, Row, Button} from 'antd';
import {connect} from 'react-redux';
import EmailEditor from './EmailEditor';
import * as status from '../../constant/resetStatus'
import {FormattedMessage} from "react-intl";
import {withRouter} from "react-router-dom";

class EmailModification extends Component {
  state = {
    isEdited: false
  }

  handleModifyEmailClick = () => {
    this.setState({
      isEdited: true
    })
  }

  componentWillReceiveProps = (nextProps) => {
    if(nextProps.emailResetStatus.status === status.PENDING){
      this.setState({
        isEdited: true
      })
    }
  }

  renderEmailInfo = () => (
    <div>
      <p className="email-info"><FormattedMessage id='邮箱' />： {this.props.userEmail}</p>
      <Row>
        <Button type="primary" onClick={this.handleModifyEmailClick}><FormattedMessage id='修改邮箱' /></Button>
      </Row>
    </div>
  )

  render = () => {
    return (
      <Card noHovering={true} title={<FormattedMessage id='修改邮箱' />}>
        {this.state.isEdited  ? <EmailEditor /> : this.renderEmailInfo()}
        <p className="email-error">{this.props.emailResetStatus.status === status.FAILURE && <FormattedMessage id='邮箱绑定失败！请再次尝试！' />}</p>
      </Card>
    )
  }
}

const mapStateToProps = state => ({
  userEmail: state.user.email,
  emailResetStatus: state.emailResetStatus
});

const mapDispatchToProps = dispatch => ({});

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(EmailModification))



